<template>
    <div class="left_menu">
        <img src="../../assets/images/repair_logo.png" class="logo">
        <div v-for="(item, index) in list" :key="index" class="panel_item">
            <div class="panel_header" @click="togglePanel(index)">
                <!-- <img src="../../assets/logo1.png" style="width: 20px;height: 20px;"> -->
                <!-- {{ item.icon }} -->
                <Icon :iconName="item.icon" />
                <span>{{ item.levelName }}</span>
                <el-icon v-if="activeIndex === index">
                    <ArrowDown />
                </el-icon>
                <el-icon v-else>
                    <ArrowUp />
                </el-icon>
            </div>
            <transition name="collapse">
                <div v-show="activeIndex === index" class="panel-content">
                    <div class="menu_li" :class="{ 'menu_li_active': val.path == defaultPath }" @click="goHandle(val)"
                        v-for="val in item.children">
                        <p>{{ val.levelName }}</p>
                        <div class="li_xian" :class="{ 'li_xian_active': val.path == defaultPath }"></div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import Icon from '@/components/Icon.vue';
import { ElMessageBox } from "element-plus";
import { mapState, mapActions } from 'vuex';
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";

export default {
    name: "leftMenu",
    components: { Icon, ElMessageBox, ArrowDown, ArrowUp },
    data() {
        return {
            active: "",
            list: [],
            user: {},
            flagId: 1,
            flag: false,
            activeIndex: 0,
        };
    },
    computed: {
        ...mapState(['navMenuList', 'defaultPath',]), // 映射仓库中的状态到组件

        defaultPath1() {

            return this.defaultPath
        }
    },
    mounted() {
        if (localStorage.getItem("active")) {
            this.active = localStorage.getItem("active")
        }
        this.user = JSON.parse(sessionStorage.getItem("user"))
        // this.getMyPermission()
        this.getTreeData();

    },
    watch: {
        active(newValue) {
            localStorage.setItem("active", newValue)
        }
    },
    methods: {
        ...mapActions(['uploadAdd']),
        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6055" }, "get").then((data) => {
                // this.list = data;
                // console.log(this.list);

                this.list = data[0].children;
                console.log(123, this.list[0].children);
                if (this.list[0].children.length > 0) {
                    this.active = this.list[0].children[0].path
                    this.goHandle(this.list[0].children[0])
                }
            });
        },
        goHandle(data) {
            this.$router.push({ path: data.path })
            this.uploadAdd(data)
        },


        togglePanel(index) {
            this.activeIndex = this.activeIndex === index ? null : index;
        },
    },
}
</script>

<style scoped>
.left_menu {
    width: 10vw;
    min-width: 200px;
    min-height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    height: 38px;
    margin: 19px 0 40px -10px;
}

.panel_item {
    width: 100%;
    cursor: pointer;
}

.panel_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 45px;
}

.menu_li {
    /* background-color: brown; */
    text-align: center;
    height: 40px;
    line-height: 40px;
    position: relative;
}

.menu_li_active {
    background-color: rgba(0, 126, 255, 0.05);
    color: #007EFF;
    font-size: 16px;
}

.li_xian {
    width: 4px;
    height: 40px;
    background-color: #FFF;
    border-radius: 4px 0 0 4px;
    position: absolute;
    right: 0;
    top: 0;
}

.li_xian_active {
    background-color: #007EFF !important;
}




.collapse-enter-active,
.collapse-leave-active {
    transition: max-height 0.1s ease, opacity 0.1s ease;
}

.collapse-enter,
.collapse-leave-to {
    max-height: 0;
    opacity: 0;
}
</style>